<template>
  <div class="category-page">
    <div class="container">
      <div class="page-header">
        <h1>{{ categoryName }}</h1>
        <p>共 {{ filteredProducts.length }} 个商品</p>
      </div>

      <SearchBar />

      <el-row :gutter="20">
        <el-col 
          v-for="product in filteredProducts"
          :key="product.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <ProductCard :product="product" />
        </el-col>
      </el-row>

      <div v-if="filteredProducts.length === 0" class="no-results">
        <el-empty description="该分类下没有找到相关商品">
          <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import ProductCard from '@/components/ProductCard/ProductCard.vue'

export default {
  name: 'CategoryPage',
  components: {
    SearchBar,
    ProductCard
  },
  computed: {
    ...mapGetters('tools', ['getFilteredTools']),
    categoryName() {
      return this.$route.params.category
    },
    // 假设商品数据和工具数据结构一致，实际项目可根据实际数据源调整
    filteredProducts() {
      return this.getFilteredTools.filter(item => 
        item.category === this.categoryName
      )
    }
  },
  watch: {
    '$route'(to) {
      // 当路由变化时，重置搜索条件
      this.updateSearch('')
    }
  },
  methods: {
    ...mapActions('tools', ['updateSearch'])
  }
}
</script>

<style lang="scss" scoped>
.category-page {
  padding: 40px 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  
  h1 {
    font-size: 2.5rem;
    color: #303133;
    margin-bottom: 10px;
  }
  
  p {
    color: #606266;
    font-size: 1.1rem;
  }
}

.no-results {
  text-align: center;
  padding: 60px 0;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
}
</style> 